 <include file="public:header"/>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
 <style type="text/css">
     .dijiao{
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #fff;
        background: #f96868;
        text-align: center;
        font-size: 16px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -o-border-radius: 4px;
        cursor: pointer;
     }
     .listboxes{
        width: 90%;
        margin: 10px auto; 
     }
     .listboxes .list{
        width: 50%;
        float: left;
     }
     .listboxes .list p{
        width: 100%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
     }
     .toplist{
        position: relative;
        overflow: hidden;
     }
     .toplist img{
        display: block;
        width: 140px;
        height: 140px;
        margin: 10px auto;
     }
     .toplist input{
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
     }
     label{
        font-size: 15px;
     }
 </style>

<!-- Page -->

<!--NEW Page -->
<div class="page animsition">
    <div class="page-content padding-30 container-fluid">
        <p style="width: 580px;margin: 100px auto 30px;font-size: 20px;text-align: center;color: #f96868;">请完成以下实名认证信息*</p>
        <form class="form-horizontal" style="width: 580px;margin: 10px auto 30px;padding: 40px;background: #fff;" role="form">
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">身份证</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" onblur="isCardNo(this)" id="firstname" placeholder="请输入您的身份证号码">
            </div>
          </div>
          <div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="lastname" placeholder="请输入您的姓名">
            </div>
          </div>
          <div class="form-group">
            <div class="listboxes clearfix">
              <div class="list">
                  <div class="toplist">
                      <img src="../images/img_up.png">
                      <input type="file" onchange="uploads(this)" id="zm" name="">
                  </div>
                  <p>请上传身份证正面</p>
              </div>
              <div class="list">
                  <div class="toplist">
                      <img src="../images/img_up.png">
                      <input type="file" onchange="uploads(this)" id="fm" name="">
                  </div>
                  <p>请上传身份证反面</p>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <span class="dijiao" onclick="dijiao()">提交</span>
            </div>
          </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    function validateTip(msgs){
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.msg(msgs);
          });
    }

    function isCardNo(id){
            var card = $.trim($(id).val());
          // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
          var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
          if(reg.test(card) === false) 
          { 
            validateTip('请输入合法的身份证号码');
            $(id).val('');
            return false; 
          } 
        }

        var zm = '',fm = '';
    function uploads(id){
        var file = id.files[0];
           if (window.FileReader) {    
                var reader = new FileReader();    
                reader.readAsDataURL(file);    
                //监听文件读取结束后事件    
              reader.onloadend = function (e) {
                if($(id).attr('id') == 'zm'){
                    zm = e.target.result;
                }else{
                    fm = e.target.result;
                }   //e.target.result就是最后的路径地址
                console.log('zm='+zm);
                console.log('fm='+fm);
            };
           }
    } 


    // 提交
    function dijiao(){
        // 正面的验证
        if(zm == ''){
            validateTip('您的身份证正面的没上传');
            return;
        }
        // 反面的验证
        if(fm == ''){
            validateTip('您的身份证反面的没上传');
            return;
        }
        // 身份证号码的验证
        var idcard = $('#firstname').val();
        if(idcard == ''){
            validateTip('您的身份证号码没填写');
            return;
        }
        // 姓名的验证
        var username = $('#lastname').val();
        if(username == ''){
            validateTip('您的姓名没填写');
            return;
        }
        $.ajax({
            url:"",
            type: 'post',
            dataType:'json',
            data:{
                zm: zm,
                fm: fm,
                idcard: idcard,
                username: username
            },
            success: function(res){

            }
        })

    }
</script>
<!--End NEW page-->


<!-- End Page -->
 <include file="public:footer"/>
